import React, { useState } from 'react'
import { Steps, Layout, Card } from 'antd'
import '../style.css'
import VerifyUser from './VerifyUser';
import ModifyPassword from './ModifyPassword';
import ModifySuccess from './ModifySuccess';

const { Step } = Steps;


export default function ChangePassword() {

    const [current, setcurrent] = useState(0)



    function onNext() {
        setcurrent(current + 1)
    }

    return (
        <Layout className="change-bg">
            <Card className="change-form" style={{ margin: "auto auto", width: '550px', padding: '24px' }}>

                <Steps
                    type="navigation"
                    current={current}
                    // onChange={handleChange}
                    className="site-navigation-steps"
                >
                    <Step title="账号验证" />
                    <Step title="重置密码" />
                    <Step title="完成设置" />
                </Steps>{
                    current === 0 ? <VerifyUser onNext={onNext} /> : current === 1 ? <ModifyPassword onNext={onNext} /> : <ModifySuccess />
                }


            </Card>
        </Layout>
    )
}
